<template>
  <div class="form_container view">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          router
        >
          <span class="back">
            <el-button
              type="text"
              size="default"
              icon="el-icon-back"
              @click="$router.push({ name: 'Dashboard' })"
              >返回我的问卷</el-button
            >
          </span>
          <el-menu-item
            :route="{ path: '/edit', query: { id: $route.query.id } }"
            index="/edit"
          >
            <i class="el-icon-edit"></i>
            <span slot="title">编辑</span>
          </el-menu-item>

          <el-menu-item
            :route="{ path: '/logic', query: { id: $route.query.id } }"
            index="/logic"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">逻辑</span>
          </el-menu-item>

          <el-menu-item
            :route="{ path: '/setting', query: { id: $route.query.id } }"
            index="/setting"
            ><i class="el-icon-s-tools"></i>
            <span slot="title">设置</span></el-menu-item
          >

          <el-menu-item
            :route="{ path: '/view', query: { id: $route.query.id } }"
            index="/view"
            ><i class="el-icon-view"></i>
            <span slot="title">预览</span></el-menu-item
          >
          <el-menu-item
            :route="{ path: '/data', query: { id: $route.query.id } }"
            index="/data"
            ><i class="el-icon-s-data"></i>
            <span slot="title">数据</span></el-menu-item
          >
          <el-menu-item
            :route="{ path: '/check', query: { id: $route.query.id } }"
            index="/check"
            ><i class="el-icon-s-check"></i>
            <span slot="title">审查</span></el-menu-item
          >
        </el-menu>
      </el-header>
      <el-main >
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {},
  created() {
    this.activeIndex = this.$route.path;
  },
};
</script>

<style scoped>
.back {
  position: absolute;
  left: 0;
  height: 60px;
  line-height: 60px;
}
.view >>> .el-menu {
  display: flex;
  justify-content: center;
  user-select: none;
}
.el-main{
  background: #efeeee;
      overflow-x: hidden;
}
.el-header{
  padding: 0;
}
</style>